// src/components/challenge/ChallengeList.jsx
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { getItem, setItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const ChallengeList = () => {
  const [challenges, setChallenges] = useState([]);
  const { user } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    // Initialize sample challenges if none exist
    const storedChallenges = JSON.parse(getItem('challenges') || '[]');
    if (storedChallenges.length === 0) {
      const initialChallenges = [
        {
          id: 1,
          title: '速度之王挑战',
          description: '在上海国际赛道完成最快单圈时间',
          reward: '10000积分',
          participants: 24,
          deadline: '2024-03-31',
          status: 'active'
        },
        {
          id: 2,
          title: '耐力赛挑战',
          description: '连续驾驶2小时，保持稳定圈速',
          reward: '8000积分',
          participants: 18,
          deadline: '2024-03-25',
          status: 'active'
        }
      ];
      setItem('challenges', JSON.stringify(initialChallenges));
      setChallenges(initialChallenges);
    } else {
      setChallenges(storedChallenges);
    }
  }, []);

  const handleJoinChallenge = (challengeId) => {
    if (!user) {
      navigate('/login');
      return;
    }
    // In a real app, we would update the challenge participation in the backend
    alert('成功参加挑战！');
  };

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-gray-900">赛道挑战</h1>
      <div className="grid gap-6">
        {challenges.map((challenge) => (
          <div
            key={challenge.id}
            className="bg-white rounded-lg shadow-md p-6 space-y-4"
          >
            <div className="flex justify-between items-start">
              <div>
                <h3 className="text-xl font-semibold text-gray-900">
                  {challenge.title}
                </h3>
                <p className="mt-2 text-gray-600">{challenge.description}</p>
              </div>
              <div className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
                {challenge.status === 'active' ? '进行中' : '已结束'}
              </div>
            </div>
            <div className="flex justify-between items-center text-sm text-gray-500">
              <span>参与人数: {challenge.participants}</span>
              <span>截止日期: {challenge.deadline}</span>
            </div>
            <div className="flex justify-between items-center">
              <span className="text-lg font-semibold text-blue-600">
                奖励: {challenge.reward}
              </span>
              <button
                onClick={() => handleJoinChallenge(challenge.id)}
                className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
              >
                参与挑战
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ChallengeList;